//引入Count的组件并重命名为CountUI
import CountUI from '../../components/Count'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

/*  *****
	//fixme 3.mapStateToProps用于传递状态
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	state是 reducer里的 const initState = 0 //初始化状态
	//他的子组件，UI组件将这样接收{this.props.count}
*/
function mapStateToProps(state){
	return {count:state}
}

/* 	*****
	//fixme 3.mapDispatchToProps用于传递操作状态的方法
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value 这个value是个方法
	他的子组件，UI组件将这样接收this.props.jia(value*1)
*/
function mapDispatchToProps(dispatch){
	return {

		//dispatch调遣redux的action(number) dispatch(createIncrementAction(number))
		//fixme action只能由dispatch调遣 换言之 dispatch(某一action)
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
        //FIXME 下面是另一种写法 不用：同样也可以this.porps.reqLogin
        //data是用户名密码  callback 是一个回调函数
        /*reqLogin(data, callback){
            const action = getUserDataAction(data, callback);
            //dispatch调遣redux的action(number) dispatch(createIncrementAction(number))
            dispatch(action)
        }*/
	}
}
//*****
//使用connect()()创建并暴露一个Count的容器组件 可以理解为Count组件的父组件 但其实只是为了连接action和Count组件
// mapStateToProps,mapDispatchToProps是要传的参数
//connect(a,b)(UI)  a和b必须是函数，a用于传递状态  b用于传递操作状态的方法   UI是此容器的子组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

